<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动调</title>
    <link rel="stylesheet" href="../css/normalize.css"/>
    <link rel="stylesheet" href="../css/element.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/dongdiao.css"/>
</head>
<body class="theme">
<div id="app" v-cloak>
    <div id="header">
        <!-- 头部导航组件 -->
        <header-nav></header-nav>
    </div>
    <section class="main outter-top clearfix auto">
        <div class="left-side fl skin outter-right">
            <div class="fluctuation skin2 border">
                <ul class="fluctuation-content  clearfix">
                    <li class="product fl" v-for="(value,key,index) in normalData">
                        <h3 class="product-fluctuation" >{{key|switchNormal}}（m³/h）</h3>
                        <div class="fluctuation-data">
                            <p class="fluctuation-data-val">{{Number(value)|formatterVal3|keepOne}}<span class="unit"> X10⁵</span></p>
                            <span class="product-status"></span>
                        </div>

                    </li>
                </ul>
                <div class="fluctuation-chart">
                    <div class="clearfix">
                        <ul class="border fluctuation-chart-toop fl">
                            <li class="fl outter-right">
                                <span class="icon-tip icon-blue icon-right"></span>锅炉预计用气总量
                            </li>
                            <li class="fl">
                                <span class="icon-tip icon-red icon-right"></span>上游产用不平衡量
                            </li>
                        </ul>
                    </div>

                    <div id="fluctuation_chart" class=" "></div>
                </div>
            </div>
            <div class="pressure" style="display: none;">
                <h2 class="pressure-title outter-top  outter-bottom skin2 common-title">主管压力/放散</h2>
                <div class="pressure-content skin2 border">
                    <ul class="clearfix pressure-data">
                        <li class="fl pressure-data-item pressure-data-item-border">全网压力 <span class="pressure-data-item-all">10+2</span></li>
                        <li class="fl pressure-data-item">放散率 <span class="pressure-data-item-percent">4.5%</span></li>
                    </ul>
                    <div class="pressure-chart" id="pressure_chart"></div>
                </div>
            </div>
            <div class="gas">
                <h2 class="gas-title outter-top  outter-bottom common-title">
                    锅炉调节成功率
                </h2>

                <div class="skin2 border boiler-power">
                    <div class="clearfix">
                        <div class="fl achieve-poe">主操：{{Achievements.operator}}<span class="achiev-right"></span></div>
                        <ul class="fr achiev-conent-right">
                            <li class="achiev-right-li">
                                <p class="achiev-right-text">压力稳定率</p>
                                <p class="font16">{{Achievements.stabilization|Percentage}}<span>%</span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="achieve">
                            <div id="press_bar" class="barChart"></div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="main-contain skin fl">
            <ul class="main-list skin2  highlight-border clearfix">
                <li class="main-item main-item-border fl" v-for="(item,key,index) in PressureData">
                    <div class="main-item-data main-item-data-border  main-item-normal" :class="{'backgroundC':(coordination.length!=0 )&&(coordination[index].status==1)}">
                        <h3 class="main-item-data-title inner-top outter-left" v-if="index==0||index==1||index==2">{{index+1}}号锅炉</h3>
                        <h3 class="main-item-data-title inner-top outter-left" v-if="index==3||index==4">混烧{{index+1}}号锅炉</h3>
                        <div class="main-item-data-content outter-align clearfix">
                            <p class="fl main-item-data-current">当前用气量 <br/><span class="current-data">{{item.gas|formatterVal|keepOne}} </span></p>
                            <p class="fl main-item-data-prediction">预计用气量 <br/><span class="prediction-data">{{item.pressure|formatterVal|keepOne}} </span></p>
                            <p class="fl unit"><span>X10⁴m³/h</span></p>
                        </div>
                    </div>
                    <div class="main-item-chart" :id="statusChartId[index]"></div>
                </li>
            </ul>
            <div id="main_content">
                <message-center :msg="msgCenter" :srcdata = "srcline"></message-center>
            </div>
        </div>
    </section>
</div>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script src="../js/dongdiao.js"></script>
</html>